<template>
  <div class="main">
    <el-input
      v-model="filterText"
      style="margin-bottom: 12px;"
      size="small"
      placeholder="按标签搜索"
    >
      <i slot="prefix" class="el-input__icon el-icon-search" @click="filterNode" /></el-input>
    <el-tree
      ref="tree"
      class="filter-tree"
      :data="treeData"
      highlight-current
      :props="defaultProps"
      :filter-node-method="filterNode"
      node-key="id"
      default-expand-all
      @node-click="handleNodeClick"
    >
      <span slot-scope="{ node }" class="span-ellipsis">
        <span :title="node.label">{{ node.label }}</span>
      </span>
    </el-tree>
  </div>
</template>

<script>

export default {
  name: 'ComponentTree',
  props: {
    treeData: {
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      filterText: '',
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  computed: {

  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {

  },
  mounted() {

  },

  methods: {
    filterNode(value, data) {
      if (!value) {
        return true
      } else {
        if (data) {
          return data.name.indexOf(value) !== -1
        }
      }
    },
    handleNodeClick(data) {
      this.$emit('treeDetail', data)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../styles/variables';
.main{
  margin: 24px 20px 0 20px;
  padding-top: 1px;
  overflow-x: hidden;
  min-height: 730px;
}
.span-ellipsis{
  width: 100%;
  font-size:12px;
  font-weight:400;
  color:rgba(255, 255, 255, 0.6);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
</style>

